前言

前面講到的四種型別常用錦集，之中一些被我記下來的小方法，分享一下~

Array.prototype.indexOf() 用在判斷式上

狀況

判斷陣列中，if 有需要的值，則進行其他處理。

方法

位元判斷子、Array.prototype.indexOf()

• 方法一：寫很多if...else if…
• 方法二：使用 indexOf()。indexOf()會回傳在陣列中找到的第一個 num 的索引，若不存在於陣列中則回傳 -1。

let num

// 方法一
if(num === 10){
	...
}else if(num === 20){
	...
}else if(num === 30){
	...
}

// 方法二
if([10, 20, 30].indexOf(num) !== -1){
	...
}else{}

陣列中取出隨機項目組成新陣列

狀況

要從傳入的陣列中，取出幾個隨機的元素，最後回傳以這些隨機元素組成的陣列。

作法

先介紹一下 Math.rendom() ，這是前面沒講到的，它會隨機生成 0~1 的數字(有小數點)。

Math.random() * num 會得到一個介於 0 與 num 之間的數字(一樣有小數點)。

再用 Math.floor() 四捨五入 Math.random() * num ，得到一個隨機整數。

let fruitArray = ['apple', 'orange', 'guava', 'passionfruit', 'kiwi']
let newFruitArray = []

function randomArray(array, number){
    for (let i = 0; i < number; i++) {
            let randomItem = Math.floor((Math.random() * array.length))
            newFruitArray.push(array[randomItem])
    }
}

randomArray(fruitArray, 2)
console.log(newFruitArray)

>> ['apple', 'apple']

我做了一個水果陣列 fruitArray ，讓新陣列跑 number 個隨機元素進新陣列。

第一次就很幸運地發現問題：新陣列會有重複的項目。

所以我們需要在 每跑完一次迴圈後 把 fruitArray 中已經被放到 newFruitArray 過的元素刪除，使用 Array.prototype.splice()。

let fruitArray = ['apple', 'orange', 'guava', 'passionfruit', 'kiwi']
let newFruitArray = []

function randomArray(array, number){
    for (let i = 0; i < number; i++) {
            let randomNum = Math.floor((Math.random() * array.length))
            newFruitArray.push(array[randomNum])
            array.splice(randomNum, 1)
    }
}

randomArray(fruitArray, 2)
console.log(newFruitArray)

沒問題了，解決~~

使用 string.prototype.split() 整理資料

狀況

從後端拿到的資料，數量這欄有些看起來怪怪的，想要把欄位內容整理一下看起來會比較合理，條件如以下：

1. 如果水果數量相同，就只顯示一個數字
2. 如果水果數量第一個數字是零，則不顯示零
3. 其他狀況正常顯示

期望結果

原始 >> 處理後結果

水果1: 1～2 個 >> 水果1: 1～2 個

水果2: 1～1 個 >> 水果2: 1 個

水果3: 0～1個 >> 水果3: 1 個

作法

string.prototype.split()、三元運算子連續判斷

let fruitInfo = [
    {
      name: 'apple',
      store: '1~2 個',
    },
    {
      name: 'pear',
      store: '1~1 個',
    },
    {
      name: 'peach',
      store: '0~1 個',
    },
  ]
  for (let i = 0; i < fruitInfo.length; i++) {
    const element = fruitInfo[i].store;
    let fruitnum = element.split(' ')[0].split('~')
    let fruitUnit = element.split(' ')[1]
    fruitInfo[i].store = fruitnum[0] === fruitnum[1] ? fruitnum[0] + fruitUnit : 
        fruitnum[0] == 0 ? fruitnum[1] + fruitUnit : 
        element
  }
  console.log(fruitInfo)

將二維陣列轉為一維

狀況

從後端拿到資料時居然是有點複雜的情況，把二維陣列轉成好給前端使用的一維陣列。

方法

• oldArray 是一個二維陣列，最裡面是dataValues(或是data 或是其他後端給我們的名字...)再包資料
• 先宣告一空陣列newArray，拆解2次oldArray後push進新陣列
• newArray即會是新的拆好的陣列

oldArray.forEach(ele => {
	ele.forEach(ele2 => {
		const data = ele2.dataValues;
		newArray.push(data);
	});
});

結語

今天分享四個小功能的寫法，其實都不難。我覺得在遇到問題的當下，會容易因為「步驟很多」、「聽起來很複雜」，而把解法想得很難；但如果把問題適當地拆解，逐步思考第一個遇到的問題能用什麼方法、第二個、第三個…或許不知不覺就完成了唷。

參考

random
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Math/random